import { NavBar, List, Stepper, Button, Image, Checkbox } from 'antd-mobile';
import { useNavigate } from 'react-router-dom';
import '../assets/style/cart.scss';
import goodsImg from '../assets/imgs/01.png';

export default function Cart() {
  const navigate = useNavigate();
  const back = () => {
    navigate(-1);
  }
  return (
    <div className='cart-container'>
      <NavBar className="page-header" onBack={back}>购物车</NavBar>
      <List>
        {
          [1, 1, 1, 1, 1, 1, 11].map((item, index) => (
            <List.Item key={index}>
              <div className='cart-item'>
                <Checkbox className='checkbox' />
                <div className="cover">
                  <Image src={goodsImg} fit='contain'></Image>
                </div>
                <div className='actions'>
                  <Stepper
                    className='stepper'
                    defaultValue={1}
                    step={1}
                    onChange={value => {
                      console.log(value)
                    }}
                  />
                  <Button style={{ float: 'right' }} size='mini' shape="rectangular" color="primary">删除</Button>
                </div>
              </div>
            </List.Item>
          ))
        }
      </List>

      {/* 订单结算 */}
      <div className="submit-bar">
        <Checkbox className='checkbox' defaultValue={true} onChange={(value) => { console.log(value) }}>全选</Checkbox>
        <div className="order-price">
          订单总金额: &yen; 999
        </div>
        <div className='btn-next'>
          去结算(2件)
        </div>
      </div>

    </div>
  )
}
